<!--
 * @Author: 曹捷
 * @Date: 2020-06-20 16:16:56
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-12-11 21:17:49
 * @Description: 列表多选
--> 
<template>
  <view class="me-select-item-wrap-box">
    <view :key="index" class="me-select-item-wrap" v-for="(item, index) in data__list">
      <view :class="{'scan': editModel}" class="me-select-item-left">
        <view @click="itemTap(item, index)">
          <slot :slot-scope="{item: item, index:index}"></slot>
        </view>
        <image :class="{'up': editModel}" @click="selectItem(item[options.key], false)" class="select-icon"
          src="@/static/select/unselect.png" v-show="editModel && selectInfo[item[options.key]] " />
        <image :class="{'up': editModel}" @click="selectItem(item[options.key], true)" class="select-icon"
          src="@/static/select/select.png" v-show="editModel && !selectInfo[''+item[options.key]]" />
      </view>
    </view>
    <slot name="footer"></slot>
    <div class="bot-footer" v-if="editModel && data__list.length > 0"></div>
    <view class="bot-fixed-wrap" v-if="editModel && data__list.length > 0">
      <view @click="selectAll" class="but" v-if="selectNum < data__list.length">全选</view>
      <view @click="unSelectAll" class="but" v-else>取消全选</view>
      <view :class="{'danger': selectNum > 0, 'un':selectNum<=0 }" @click="finish" class="but">
        {{selectNum > 0 ? `${operateName}(${selectNum})` : `${operateName}`}}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    datalist: {
      type: Array,
      require: true,
    },
    options: {
      type: Object,
      require: true,
    },
    operateName: {
      type: String,
      default: '删除',
    },
  },
  data () {
    return {
      data__list: [],
      editModel: false,
      selectArr: [],
      selectInfo: {},
    }
  },
  computed: {
    selectNum () {
      let num = 0
      let list = Object.keys(this.selectInfo).forEach((element) => {
        if (this.selectInfo[element]) {
          num++
        }
      })
      return num
    },
    selectList () {
      let result = []
      Object.keys(this.selectInfo).forEach((element) => {
        if (this.selectInfo[element]) {
          result.push(element)
        }
      })
      return result
    },
  },
  watch: {
    datalist: {
      handler (n, o) {
        this.data__list = n
      },
      deep: true,
    },
  },
  created () {
    this.data__list = this.datalist
  },
  methods: {
    itemTap (item, index) {
      if (this.options.itemCanSelect && this.editModel) {
        this.data__list[index].select = !this.data__list[index].select
      }
      if (!this.editModel) {
        this.$emit('itemClick', item)
      }
    },
    changeModel () {
      this.editModel = !this.editModel
    },
    getSelectAll () {
      return this.selectArr
    },
    selectAll () {
      this.data__list.forEach((item, index) => {
        this.$set(this.selectInfo, '' + item[this.options.key], true)
      })
    },
    unSelectAll () {
      this.selectInfo = {}
    },
    selectItem (key, value) {
      this.$set(this.selectInfo, key, value)
    },
    getCheckdList () {
      let arr = []
      this.data__list.forEach(element => {
        if (this.selectInfo[element[this.options.key]]) {
          arr.push(element)
        }
      })
      return arr
    },
    finish () {
      if (this.selectList.length === 0) return
      this.$emit('finish', this.selectList, this.getCheckdList())
    },
  },
}
</script>

<style scoped>
.me-select-item-wrap-box {
  box-sizing: border-box;
}

.me-select-item-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* margin: 20upx 0; */
}

.me-select-item-left {
  min-height: 40upx;
  width: 100%;
  transition: width 0.1s linear;
}

.me-select-item-left .select-icon {
  height: 40upx;
  width: 40upx;
}

.me-select-item-left.scan {
  width: 88%;
}

.me-select-item-left .select-icon {
  position: absolute;
  left: 10upx;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
.me-select-item-left .select-icon.up {
  z-index: 1;
}
.bot-fixed-wrap {
  position: fixed;
  background-color: #ffffff;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100upx;
  border-top: 1rpx solid #d1d1d1;
  z-index: 99;
}
.bot-footer {
  height: 100upx;
  width: 100%;
}

.but {
  line-height: 100upx;
  text-align: center;
  height: 100upx;
  width: 50%;
}

.but.un {
  color: #999999;
}

.but:first-child {
}

.but.danger {
  color: red;
}
</style>
